<template>
  <!-- 大贸一站式申报-新增、编辑 -->
  <div class="app-container">
    <basic-container>
      <div class="basic-info">
        <div class="ui-top-view">
          <div class="ui-top-title">进/出境基本信息</div>
        </div>
        <div class="ui-basic-content">
          <!-- 进/出境基本信息 -->
          <entry-exit-info
            ref="entryExitInfo"
          ></entry-exit-info>
        </div>
      </div>
    </basic-container>

    <basic-container>
      <div class="basic-info">
        <div class="ui-top-view">
          <div class="ui-top-title">提(运)单信息</div>
        </div>
        <div class="ui-basic-content" style="padding-top: 0">
          <!-- 货物信息 -->
          <goods-info ref="goodsInfo"></goods-info>
        </div>
      </div>
    </basic-container>

    <basic-container>
      <div class="basic-info">
        <div class="ui-top-view">
          <div class="ui-top-title">运输工具信息</div>
        </div>
        <div class="ui-basic-content">
          <!-- 运输工具信息 -->
          <add-transport ref="addTransport"></add-transport>
        </div>
      </div>
    </basic-container>

    <div class="common-footer">
      <el-button type="primary" size="small" @click="submitForm">提交</el-button>
      <el-button type="primary" plain size="small" @click="goBack"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
import entryExitInfo from './entryExitInfo.vue';
import GoodsInfo from './goodsInfo.vue';

import { addSwMftHead } from "@/api/swdecl/swMftHead"
import AddTransport from './addTransport.vue';
export default {
  components: { entryExitInfo, GoodsInfo, AddTransport },
  name: "add-edit-detail",
  dicts: ["mft_ie_flag","mft_binding_type"],
  data() {
    return {
      //海关关区信息列表
      customsList: [],
      fieldOptions: [],
    };
  },
  created() {

  },
  methods: {

    goBack() {
      this.$router.go(-1);
    },
    submitForm() {
      this.$refs.entryExitInfo.$refs["form"].validate((valid) => {
        if (valid) {
          //进出境基本信息
          let entryExitInfo = this.$refs.entryExitInfo.form;

          const params = {
            ...entryExitInfo,
            goodsList: this.$refs.goodsInfo.goodsList,  //货物信息
            transportList: this.$refs.addTransport.vehicleList,  //运输工具信息
          };
          addSwMftHead(params).then((res) => {
            if(res.code === 200) {
              this.$message.success("新增成功！");
              this.$router.go(-1);
            }
          });
        }
      })
    },
  },
};
</script>
<style scoped lang="scss">
.common {
  overflow: hidden;
}
.m-top {
  margin-top: 20px;
}
.b-r {
  border-right: 1px solid #dcdfe6 !important;
}
.b-none {
  border-right: none !important;
}
::v-deep .el-card {
  overflow: inherit;
}
.ui-basic-content {
  padding: 20px 0;
}
.ui-basic-content .el-form .el-form-item {
  margin-bottom: 1.1rem;
}
.add-box {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  // width: 100%;
  padding: 0.5rem 0;
  margin: 0.2rem 0;
}
.common-del {
  margin-left: 10px;
  margin-top: 10px;
}
.common-addBtn {
  margin-bottom: 15px;
}
::v-deep .el-drawer__body {
  padding: 0 20px;
}
.searchBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  ::v-deep .el-button--primary {
    padding: 5px 10px;
    border-radius: 5px;
  }
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}
::v-deep .el-pagination {
  .el-input--mini {
    .el-input__inner {
      height: 22px;
      line-height: 22px;
    }
    .el-input__suffix {
      top: 2px;
    }
  }
}

.ui-top-view{
  height: 1.875rem;
  line-height: 1.875rem;
  padding:0 1.0625rem;
  padding-left: 0;
  .ui-top-title{
      padding-bottom: 0.625rem;
      position: relative;
      padding-left:1.25rem;
      font-size:1rem;
      color: #0f6ecf;
      font-weight: 500;
      &:before{
          content: ' ';
          border-left:3px solid #0f6ecf;
          display: inline-block;
          height: 1rem;
          position: absolute;
          top:0.4rem;
          left:0.625rem;
      }
      .el-pagination{
          display: inline-block;
      }
       .el-pagination.is-background .el-pager li:not(.disabled).active{
          background-color: #0f6ecf;
          border-radius: 0;
      }
      .el-pagination.is-background .el-pager li,
      .el-pagination.is-background .btn-next,
      .el-pagination.is-background .btn-prev{
          background-color: transparent;
          font-weight: normal;
          height: 25px;
          line-height: 25px;
          min-width: 25px;

      }
  }
  .ui-top-tips{
      font-size: 12px;
      font-weight: 400;
      color: #d84442;
      line-height: 12px;
  }
}
.table-input {
  width: 70%;
}
.table-input2 {
  width: 85%;
}
.common-footer {
  text-align: center;
  margin-top: 15px;
}
::v-deep .el-empty {
  padding: 10px 0;
}
::v-deep .el-empty__image {
  width: 80px !important;
}
::v-deep .el-empty__description {
  margin-top: 0;
  p {
    font-size: 12px;
  }
}
</style>
